<template>
  <div class="mb4_default">
    <div class="c-w100 c-flex-row c-pv20 c-ph30 c-fs24 c-bg-FFE" v-if="isShowMemberTips" @click="linkToVipUpgrade">
      <span class="c-fc-sorange">{{memberTips}}</span>
      <span class="c-fc-smblue">{{'立即续费 >'}}</span>
    </div>
    <div class="c-flex-row c-hh60 c-bg-white c-aligni-end c-pl24 c-justify-sb">
      <div class="c-fs24 c-flex-grow1 c-w0 c-pr40 c-text-ellipsis1">Hi，{{nickName}}</div>
      <div class="c-flex-row c-aligni-end">
        <div class="c-ww200 c-bg-f569 c-br20 c-pr10 c-flex-row c-aligni-end c-justify-end c-hh40">
          <span class="iconfont c-fs26 c-fc-gray" @click="clickGoCourseSearch">&#xe6d6;</span>
        </div>
        <span class="iconfont c-fs38 c-fc-gray c-ml20" @click="clickGoPoints">&#xe7a2;</span>
        <div class="c-pl16 c-pr10 c-pv8 c-br-tl20 c-br-bl20 c-fs18 c-fc-white c-bg-E93F21 c-bd1 c-ml20" @click="clickShowQR">+ 关注</div>
      </div>
    </div>
    <!--modelType类型说明：
1：轮播图  2：导航栏  3：优惠券  4：课程预告  5：预约师资  6：训练营  7：测评  8：语音评测  9：打卡  10：词典
11：直播专区  12：主播约课  13：课程分类  14：特惠专区  15：知识套餐  16：热门专栏  17：交互测评  18:社群  19:精品课程 20:资料库,21:问答,22:分销商城,23:友情链接,24:公司简介,25热门专区,26VIP专区-->
    <section v-for="(_item, _index) in modules" :key="_index">
      <div class="c-p c-bg-white c-bd-b12-f5" id="swap" v-if="_item.modelType==1 && showSwiperList && _item.items && _item.items.length > 0">
        <swiper :options="swiperOption" ref="swiperMy">
          <swiper-slide v-for="(item, index) in _item.items" :key="index">
            <img @click="swiperClick(item.link)" class="c-w100" :src="$addXossFilter(item.url)" :data-url="item.link" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 课程预告 -->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==4 && _item.items != ''">
        <span class="c-p c-fs30 c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
        <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
      </div>
      <div class="c-ph24 c-pt30 c-pb30 c-bd-b12-f5 c-aligni-center" v-if="_item.modelType==4 && _item.items != ''">
        <div @click="clickCourseForenotice(_item.items.courseId)" class="c-w100 c-br10 c-maxh270 c-text-hidden c-flex-row c-flex-center c-flex-shrink0">
          <img class="c-w100 imgCloseBig" :src="$addXossFilter(_item.items.courseAvatar)" @error="_item.items.courseAvatar = require('../../../assets/defult270.png')" alt="" />
        </div>
        <div class="c-pt24 c-flex-row c-aligni-center">
          <div class="c-flex-grow1 c-w0 c-pr24">
            <div class="c-fs28 c-text-ellipsis2 c-lh28">{{_item.items.name}}</div>
            <div class="c-fs24 c-fc-gray c-pt16">{{_item.items.liveAt}}</div>
          </div>
          <div @click="clickForenoticeQrcode(_item.items.courseId)" class="c-ww100 c-hh50 c-flex-row c-flex-center theme-bg c-fc-white c-fs24 c-br10">
            推广
          </div>
        </div>
      </div>
      <!--优惠券-->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==3 && companyAuth.enableRedeemCode == 1 && _item.items.data != null && _item.items.data.length > 0 && !$isWxAppIos()">
        <span class="c-p c-fs30 c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
        <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
        <span class="c-fs20 c-fc-gray c-pl8" @click="goValueVoucherList">查看全部</span>
      </div>
      <div class="c-bg-white c-ph24 c-pt30 c-pb30 c-bd-b12-f5" v-if="_item.modelType==3 && companyAuth.enableRedeemCode == 1 && _item.items.data != null && _item.items.data.length > 0 && !$isWxAppIos()">
        <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
          <div class="c-inlineblack" v-for="(item,index) in _item.items.data" :key="index">
            <div class="couponStyle c-p c-mr20 " v-if="item.type == 1">
              <div class="exchange-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fs34 c-fc-white">兑换券</div>
                <div class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20" @click="getCoupon(item.redeemCodeId)">立即领取</div>
              </div>
              <div class="c-fs20 c-fc-sblack c-hh50 c-lh50 c-ph20 c-text-ellipsis1">{{item.name}}</div>
            </div>
            <div class="couponStyle c-p c-mr20 " v-else-if="item.type == 4">
              <div class="coupon-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fs34 c-fc-white">抵价券</div>
                <div class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20" @click="getCoupon(item.redeemCodeId)">立即领取</div>
              </div>
              <div class="c-fs20 c-fc-sblack c-hh50 c-lh50 c-ph20 c-text-ellipsis1">适用于预约师资功能</div>
            </div>
            <div class="couponStyle c-p c-mr20 " v-else>
              <div class="coupon-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fc-white c-flex-column c-justify-sb">
                  <div v-if="item.type == 5" class="c-fs22 c-fw-b">
                    <span class="c-fs42">{{Number(item.price)}}</span>折
                  </div>
                  <div v-else class="c-fs42 c-fw-b">
                    <span class="c-fs22">{{'￥' | iosPriceFilter}}</span>{{Number(item.price)}}
                  </div>
                  <div class="c-fs18">{{Number(item.amount) > 0 ? '满'+Number(item.amount)+'元可用' : '无使用门槛'}}</div>
                </div>
                <div class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20" @click="getCoupon(item.redeemCodeId)">立即领取</div>
              </div>
              <div class="c-fs20 c-fc-sblack c-hh50 c-lh50 c-ph20 c-text-ellipsis1">{{item | couponApplyText}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 小班课 -->
      <section class="c-bg-white c-flex-column c-pt40 c-bd-b12-f5 c-ph24" v-if="_item.modelType==29 && _item.items.data && _item.items.data.length > 0 && companyAuth.enableLivePrivateClass == 1">
        <div class="c-flex-row c-justify-sb c-aligni-end">
          <span class="c-p c-fs30 c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
          <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
          <span class="c-fs18 c-fc-gray c-pl8" @click="clickMoreClassList">{{'查看更多 >'}}</span>
        </div>
        <class-Item :itemList="_item.items.data" :mb="4"></class-Item>
      </section>
      <!-- 预约师资 -->
      <div class="c-bd-b12-f5" v-if="_item.modelType==5 && _item.items.length > 0 && companyAuth.enableReservationModule == 1">
        <div class="c-ph24 c-pt40 c-flex-row c-aligni-center c-pb30">
          <span class="c-fs30 c-lh c-pl20 c-p"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
          <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
          <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreBooking">查看更多</span>
        </div>
        <booking-com :bookingList='_item.items' class="c-pb10"></booking-com>
      </div>
      <keep-alive>
        <!-- 训练营 -->
        <camp-index-com :trainingName='_item.name' :trainingDesc='_item.desc' :trainingList='_item.items' v-if="_item.modelType==6 && _item.items.length > 0 && companyAuth.enableTrainingModule == 1"></camp-index-com>
        <!-- 打卡 -->
        <clock-index-com :clockInList='_item.items.data' :clockInTitles='_item.name' :clockInDesc='_item.desc' v-if="_item.modelType==9 && _item.items.data.length > 0 && companyAuth.enableSignCardModule == 1"></clock-index-com>
        <!-- 词典 -->
        <word-index-com :wordName="_item.name" :wordDesc="_item.desc" :wordList="_item.items.data" v-if="_item.modelType==10 && _item.items.data.length>0 && companyAuth.enableDictionaryModule == 1"></word-index-com>
        <!-- 直播 -->
        <index-live-com :liveName='_item.name' :liveDesc='_item.desc' :liveList='_item.items.data' v-if="_item.modelType==11 && _item.items.data.length > 0 && companyAuth.enableTeleviseLive == 1"></index-live-com>
        <!-- 直播间 -->
        <index-personallive-com :liveName='_item.name' :liveDesc='_item.desc' :liveList='_item.items.data' v-if="_item.modelType==54 && _item.items.data.length > 0 && companyAuth.enableLivePersonalModule == 1"></index-personallive-com>
        <!-- 活动 -->
        <activity-item :activityName="_item.name" :activityDesc="_item.desc" :itemList="_item.items" v-if="_item.modelType==32 && _item.items.length>0 && companyAuth.enableActivityModule == 1"></activity-item>

        <!-- 约课  -->
        <reservation-item :reservationList="_item.items.data" :reservationTitles='_item.name' :reservationDesc='_item.desc' v-if="_item.modelType==12 && _item.items.data.length > 0 && companyAuth.enableReservationModule == 1"></reservation-item>

        <!-- 面授课 -->
        <edu-index-com :eduName="_item.name" :eduDesc="_item.desc" :eduList="_item.items.data" v-if="_item.modelType==30 && _item.items.data.length>0 && companyAuth.enableEducationSystemModule == 1"></edu-index-com>

        <!-- 电子书 -->
        <ebooks-item v-if="_item.modelType==34 && _item.items.length > 0 && _item.enableModule == 1 && companyAuth.enableEbookModule == 1" :ebooksName="_item.name" :ebooksDesc="_item.desc" :ebooksList="_item.items"></ebooks-item>
        <!-- 圈子 -->
        <circle-item v-if="_item.modelType == 55 && _item.items.length > 0 && _item.enableModule == 1 && companyAuth.enableCircleModule == 1" :circleName="_item.name" :circleDesc="_item.desc" :circleList="_item.items"></circle-item>
        <!-- 特惠专区 限时购 -->
        <flash-sales-item :bargainList="(_item.items && (companyAuth.enableBargain == 1)) ? _item.items.bargains : []" :collageList="(_item.items && (companyAuth.enableCollage == 1)) ? _item.items.collageList : []" :flashSalesList="(_item.items && (companyAuth.enableFlashSalesModule == 1)) ? _item.items.flashSales.data : []" :friendHelperList="(_item.items && (companyAuth.enableFriendHelper == 1)) ? _item.items.friendHelper : []" :flashSalesTitles='_item.name' :flashSalesDesc='_item.desc' v-if="_item.modelType==14 && _item.items && (_item.items.collageList.length > 0 || _item.items.friendHelper.length > 0 || _item.items.flashSales.data.length > 0 || _item.items.bargains.length > 0) && (companyAuth.enableFlashSalesModule == 1 || companyAuth.enableCollage == 1 || companyAuth.enableFriendHelper == 1 || companyAuth.enableBargain == 1)">
        </flash-sales-item>
        <!-- 知识套餐 -->
        <package-index-com :packageList='_item.items.data' :packageTitles='_item.name' :packageDesc='_item.desc' v-if="_item.modelType==15 && _item.items.data.length > 0 && companyAuth.enableComboModule == 1"></package-index-com>
        <!-- 交互测评 -->
        <mutua-index-com :mutuaList='_item.items.data' :mutuaTitles='_item.name' :mutuaDesc='_item.desc' v-if="_item.modelType==17 && _item.items.data.length > 0 && companyAuth.enableMutualTestModule == 1"></mutua-index-com>
        <!-- 语音测试 -->
        <voice-index-com :voiceList='_item.items.data' :mutuaTitles='_item.name' :mutuaDesc='_item.desc' v-if="_item.modelType==8 && _item.items.data.length > 0 && companyAuth.enableSpeechTestModule == 1"></voice-index-com>
        <!-- 分销商城 -->
        <distribution-index-com :distributionName="_item.name" :distributionDesc="_item.desc" :distributionList="_item.items.data" v-if="_item.modelType==22 && _item.items.data.length > 0 && companyAuth.enableDistributionMarketModule"></distribution-index-com>
      </keep-alive>
      <!-- 课程分类 -->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==13 && _item.items.length > 0">
        <div class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</div>
        <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
      </div>
      <div class="c-flex-row c-flexw-wrap c-justify-sb c-ph24 c-bd-b12-f5  c-pb30 " v-if="_item.modelType==13 && _item.items.length > 0">
        <div :class="index == 0 || index== 1 ? 'c-pt30':'c-pt24'" @click="clickSubCategory(item.level1CatId,item.level2CatId,item.level3CatId,item.name)" v-for="(item,index) in _item.items" :key="index" class="c-ww288">
          <div class="c-ww288 c-maxh192 c-br10 c-text-hidden">
            <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" alt="" />
          </div>
        </div>
        <div v-if="_item.categoriesCount > 4" @click="clickAllCategory" class="c-w100 c-br10 c-pt30 c-flex-row c-flex-center c-fs24 c-fc-gray">更多分类
          <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
        </div>

      </div>
      <!-- 专栏模块 -->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==16 && _item.items.length > 0 && companyAuth.enableColumnModule == 1">
        <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
        <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
        <span class="c-fs20 c-fc-gray c-pl8" @click="goColumn">查看更多</span>
      </div>
      <div class="c-flex-row c-flexw-wrap c-justify-sb c-ph24 c-bd-b12-f5 c-pb30" v-if="_item.modelType==16 && _item.items.length > 0 && companyAuth.enableColumnModule == 1">
        <div v-for="(item,index) in _item.items" :key="index" :class="index == 0 || index== 1 ? 'c-pt30':'c-pt24'" class="c-ww288" @click="clickColumn(item.columnId)">
          <div class="c-ww288 c-maxh288 c-br10 c-text-hidden c-p">
            <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" />
            <vip-status :item="item"></vip-status>
            <div class="c-pa c-p-b0 c-p-r0 c-fc-white c-fs12 c-textAlign-c c-ww80 c-hh24 c-lh24 theme-bg" v-if="item.isUpdating == 1 && enableColumnRelates == 1">更新中</div>
          </div>
          <div class="c-fs24 c-pt12 c-text-ellipsis2">{{item.name}}</div>
          <div class="c-flex-row c-pt16 c-aligni-center">
            <div class="theme-fc c-flex-row c-flex-grow1 c-w0">
              <span class="c-fs24" v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span><span :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, 9)}}</span>
            </div>
            <span v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9)))" class="c-fs20 c-fc-gray">{{(item.initSales + item.subscribers) | formatNumber}}人{{$isWxAppIos() ? '观看' : '购买'}}</span>
            <span v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9))" class="c-fs20 c-fc-gray">{{item.clicks | formatNumber}}次观看</span>
          </div>
        </div>
        <div v-if="_item.items.length > 0" @click="goColumn" class="c-w100 c-br10 c-pt30 c-flex-row c-flex-center c-fs24 c-fc-gray">更多专栏
          <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
        </div>
      </div>
      <!-- 测评模块 -->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==7 && _item.items.data.length > 0 && companyAuth.enableExamModule == 1">
        <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
        <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
        <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreExamination">查看更多</span>
      </div>
      <div class="c-bd-b12-f5 c-pb30 c-ph24" v-if="_item.modelType==7 && _item.items.data.length > 0 && companyAuth.enableExamModule == 1">
        <div class="c-flex-row c-pt24" v-for="(item,index) in _item.items.data" :key="index" @click="clickExaminationItem(item.topicId)">
          <div class="c-pb24">
            <div class="c-ww210 c-maxh210 c-br10 c-text-hidden c-p">
              <img class="c-w100 c-maxh210 c-br10" :src="$addXossFilter(item.avatar, require('../../../assets/examination_defult.png'))" alt="" />
              <vip-status :item="item"></vip-status>
            </div>
          </div>
          <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-ml20 c-pb24" :class="index == _item.items.data.length - 1 ? '' : 'c-bd-b1'">
            <div class="c-fs24 c-pt10">{{item.name}}</div>
            <div class="c-flex-row c-pb10 c-fc-gray c-fs20">
              <div class="theme-fc c-flex-row c-w0 c-flex-grow1">
                <span class="c-fs24" v-if="item.payType==2">{{'￥' | iosPriceFilter}}</span><span :class="item.payType==2? 'c-fs24' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, 11)}}</span>
              </div>
              <span class="c-lh">{{item.payType==2 && !$isWxAppIos() ? '已售':'已测'}}{{item.subscribers}}</span>
              <span class="c-ph10">/</span>
              <span class="c-lh">考试{{item.hasPaper}}套</span>
            </div>
          </div>
        </div>

        <div @click="clickMoreExamination" v-if="_item.items.data.length > 0" class="c-mh24 c-br10 c-pt6 c-flex-row c-flex-center c-fs24 c-fc-gray">更多测评
          <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
        </div>

      </div>
      <!--考试-->
      <section class="c-ph24 c-pt40 c-pb20 c-bg-white c-flex-column c-bd-b12-f5" v-if="_item.modelType == 31 && _item.enableModule == 1 && _item.items.data.length > 0 && companyAuth.enableExamModule == 1">
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <span class="c-fs30 c-p c-lh c-pl20">
            <span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>
            <span>{{_item.name ? _item.name : '考试'}}</span>
          </span>
          <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
          <span class="c-fs20 c-fc-gray c-pl8" :class="_item.isShowMore==1?'hide':''" @click="clickMoreTestPaper">查看更多</span>
        </div>
        <testPaper-item :itemList="_item.items.data" :isFromM7="false" :itemType="2" :showCount="_item.items.count"></testPaper-item >
      </section>
      <!--练习-->
      <section class="c-ph24 c-pt40 c-pb20 c-bg-white c-flex-column c-bd-b12-f5" v-if="_item.modelType == 33 && _item.enableModule == 1 && _item.items.data.length > 0 && companyAuth.enableQuestionBankModule == 1">
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <span class="c-fs30 c-p c-lh c-pl20">
            <span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>
            <span>{{_item.name ? _item.name : '练习'}}</span>
          </span>
          <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
          <span class="c-fs20 c-fc-gray c-pl8" :class="_item.isShowMore==1?'hide':''" @click="clickMoreQuestion">查看更多</span>
        </div>
        <question-item :itemList="_item.items.data" :isFromM7="false" :itemType="2" :mb="4" :showCount="_item.items.count"></question-item>
      </section>
      <!-- 社群模块 -->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==18 && _item.items.length > 0 && companyAuth.enableSocialGroup == 1">
        <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
        <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
        <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreSocialGroup">查看更多</span>
      </div>
      <div class="c-ph24  c-bd-b12-f5 c-pt30" v-if="_item.modelType==18 && _item.items.length > 0 && companyAuth.enableSocialGroup == 1">
        <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb30">
          <div @click="clickSocailGroupItem(item.socialRoomId)" v-for="(item,index) in _item.items" :key="index" class="c-inlineblack c-textAlign-c c-ww180" :class="index == _item.items.length - 1 ? '':'c-pr20'">
            <img class="c-ww100 c-hh100 c-brp50 c-center imgCloseBig" :src="$addXossFilter(item.avatar)" />
            <div class="c-fs24 c-pt16 c-text-ellipsis1 c-ww160 c-center c-pb20">{{item.name}}</div>
            <div class="c-ww100 c-fs20 c-hh48 c-lh48 theme-bd1 theme-fc c-br36 c-textAlign-c c-center">加入</div>
          </div>
        </div>
      </div>
      <!-- 热门专区 -->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==25 && (courseVideoList.length > 0 || courseAudioList.length > 0 || coursePicList.length > 0)">
        <span class="c-fs30 c-p c-lh c-pl20 c-w0 c-flex-grow1"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>热门专区</span>
        <div class="c-ph24" v-if="courseVideoList.length > 0">
          <div class="c-fs24 c-hh40" :class="courseType == 1 ? 'theme-fc theme-bd-b2':''" @click="changeType(1)">视频</div>
        </div>
        <div class="c-ph24" v-if="courseAudioList.length > 0">
          <div class="c-fs24 c-hh40" :class="courseType == 2 ? 'theme-fc theme-bd-b2':''" @click="changeType(2)">音频</div>
        </div>
        <div class="c-ph24" v-if="coursePicList.length > 0">
          <div class="c-fs24 c-hh40" :class="courseType == 3 ? 'theme-fc theme-bd-b2':''" @click="changeType(3)">图文</div>
        </div>
      </div>
      <div class="c-flex-row c-flexw-wrap c-justify-sb c-ph24 c-bd-b12-f5 c-pb30  " v-if="_item.modelType==25 && (courseVideoList.length > 0 || courseAudioList.length > 0 || coursePicList.length > 0)">
        <div v-for="(item,index) in excellentCourse" :key="index" class="c-ww288 c-pt30" @click="clickCourseItem(item.courseId,item.courseType)">
          <div class="c-br10 c-ww288 c-flex-shrink0 c-maxh192 c-text-hidden c-p">
            <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.courseAvatar, require('../../../assets/defult270.png'))" alt="" />
            <img class="icon-course-mark" v-if="item.courseType == 0 " src="../../../assets/i/wap/course/icon_video.png" alt="" />
            <img class="icon-course-mark" v-else-if="item.courseType == 1 " src="../../../assets/i/wap/course/icon_audio.png" alt="" />
            <img class="icon-course-mark" v-else src="../../../assets/i/wap/course/icon_pic.png" alt="" />
            <vip-status :item="item" :showAllFree="true"></vip-status>
          </div>
          <div class="c-fs24 c-pt12 c-text-ellipsis2">{{item.name}}</div>
          <div class="c-flex-row c-pt16 c-aligni-center">
            <div class="c-w0 c-flex-grow1 theme-fc" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
              <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>
              {{item.payType | priceValueFilter(item.price, 5)}}
            </div>
            <div class="c-flex-row c-aligni-center">
              <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(5))" class="iconfont c-fc-gray c-mr8 c-fs20">&#xe6bb;</span>
              <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(5))" class="c-fs20 c-fc-gray">{{item.plays != '' && item.plays != null ? item.plays : 0}}</span>
              <div v-if="(item.allowWholeWatch == 1 || (item.watchPermission == 1 && item.watchTime > 0)) && item.payType != 1 && item.courseType != 2" class="c-bd1-try-look c-fc-smblue c-fs16 c-br20 c-ph10 c-hh28 c-flex-row c-flex-center c-ml10">{{item.courseType == 1 ? '可试听':'可试看'}}</div>
            </div>
          </div>
        </div>
        <div @click="clickGoCourse" v-if="excellentCourse.length > 0" class="c-w100 c-br10 c-pt30 c-flex-row c-flex-center c-fs24 c-fc-gray">更多课程
          <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
        </div>
        <loading-status-tem :noData="excellentCourse.length == 0" :noDataText="'暂无热门课程'"></loading-status-tem>
      </div>
      <!-- VIP专区 -->
      <div class="c-bd-b12-f5" v-if="_item.modelType==26 && (vipCourseVideoList.length > 0 || vipCourseAudioList.length > 0 || vipCoursePicList.length > 0)">
        <div class="c-ph24 c-pt40 c-flex-row c-aligni-center">
          <span class="c-fs30 c-p c-lh c-pl20 c-w0 c-flex-grow1"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>VIP专区</span>
          <div class="c-ph24" v-if="vipCourseVideoList.length > 0">
            <div class="c-fs24 c-hh40" :class="vipCourseType == 1 ? 'theme-fc theme-bd-b2':''" @click="changeVipType(1)">视频</div>
          </div>
          <div class="c-ph24" v-if="vipCourseAudioList.length > 0">
            <div class="c-fs24 c-hh40" :class="vipCourseType == 2 ? 'theme-fc theme-bd-b2':''" @click="changeVipType(2)">音频</div>
          </div>
          <div class="c-ph24" v-if="vipCoursePicList.length > 0">
            <div class="c-fs24 c-hh40" :class="vipCourseType == 3 ? 'theme-fc theme-bd-b2':''" @click="changeVipType(3)">图文</div>
          </div>
        </div>
        <div class="c-flex-row c-flexw-wrap c-justify-sb c-ph24 c-bd-b12-f5 c-pb30">
          <div v-for="(item,index) in vipCourseList" :key="index" class="c-ww288 c-pt30" @click="clickCourseItem(item.courseId,item.courseType)">
            <div class="c-ww288 c-maxh192 c-br10 c-text-hidden c-p">
              <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.courseAvatar)" @error="item.courseAvatar = require('../../../assets/defult270.png')" />
              <img class="icon-course-mark" v-if="item.courseType == 0 " src="../../../assets/i/wap/course/icon_video.png" alt="" />
              <img class="icon-course-mark" v-else-if="item.courseType == 1 " src="../../../assets/i/wap/course/icon_audio.png" alt="" />
              <img class="icon-course-mark" v-else src="../../../assets/i/wap/course/icon_pic.png" alt="" />
              <div class="vipStatus">
                <vip-status :item="item" :showAllFree="true"></vip-status>
              </div>
            </div>
            <div class="c-fs24 c-pt12 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-flex-row c-pt16 c-aligni-center">
              <div class="theme-fc c-flex-row c-aligni-center c-flex-grow1 c-w0">
                <div v-if="(item.allowWholeWatch == 1 || (item.watchPermission == 1 && item.watchTime > 0)) && item.payType != 1 && item.courseType != 2" class="c-bd1-try-look c-fc-smblue c-fs16 c-br20 c-ph10 c-hh28 c-flex-row c-flex-center c-mr10">{{item.courseType == 1 ? '可试听':'可试看'}}</div>
                <span :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                  {{item.payType | priceValueFilter(item.price, 5)}}</span>
              </div>
              <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(5))" class="iconfont c-fc-gray c-mr8 c-fs20">&#xe6bb;</span>
              <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(5))" class="c-fs20 c-fc-gray">{{item.plays != '' && item.plays != null ? item.plays : 0}}</span>
            </div>
          </div>
          <loading-status-tem :noData="vipCourseList.length == 0 && loadingStatus == 'LOAD_END'" :noDataText="'暂无VIP课程'"></loading-status-tem>
          <div v-if="vipCourseList.length > 0" @click="clickGoVipCourse" class="c-w100 c-br10 c-pt30 c-flex-row c-flex-center c-fs24 c-fc-gray">更多VIP课程
            <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
          </div>
        </div>
      </div>
      <!-- 资料 -->
      <div class="img-database c-bd-b12-f5" @click="clickGoDatum" v-if="_item.modelType==20 && companyAuth.enableDatumModule == 1">
        <img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/img_datum.jpg" alt="" class="imgCloseBig" />
      </div>
      <!-- 问答 -->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==21 && companyAuth.enableQuestionModule == 1 && _item.items.status == 1">
        <span class="c-fs30 c-p c-lh c-pl20 "><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
        <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
        <span class="c-fs20 c-fc-gray c-pl8" @click="clickGoQA">查看问答</span>
      </div>

      <div class="c-ph24 c-pt30 c-pb30 c-bd-b12-f5 c-flex-row" @click="clickGoQA" v-if="_item.modelType==21 && companyAuth.enableQuestionModule == 1 && _item.items.status == 1">
        <div class="c-ww210 c-hh140 c-br10 c-text-hidden">
          <img class="c-w100 c-br10" :src="$addXossFilter(_item.items.cover)" alt="" />
        </div>
        <div class="c-pl20 c-flex-grow1 c-w0 c-flex-column c-justify-sb">
          <div class="c-fs28 c-text-ellipsis2">{{_item.items.title}}</div>
          <div class="c-fs20 c-fc-gray c-text-ellipsis2">{{_item.items.describe}}</div>
          <div class="c-fs20 c-fc-blue">{{questionCount}}个问答</div>
        </div>
      </div>
      <!-- 友情链接 -->
      <div class="c-ph24 c-pt40 c-flex-row c-aligni-center" v-if="_item.modelType==23 && _item.items.length > 0">
        <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{_item.name}}</span>
        <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{_item.desc}}</span>
      </div>
      <div class="c-ph24 c-pt30 c-pb30 c-bd-b12-f5" v-if="_item.modelType==23 && _item.items.length > 0">
        <div class="c-w100 c-hh100 c-contextX-scroll c-contexty-hidden c-ws-n">
          <div v-for="(item,index) in _item.items" @click="clickFirendLink(item.link)" :key="index" class="c-inlineblack c-textAlign-c c-ww190 c-hh100 c-text-hidden c-br10" :class="index == _item.items.length - 1 ? '':'c-mr20'">
            <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.url)" alt="" />
          </div>
        </div>
      </div>

      <div class="c-pv40 c-flex-row c-fs30 c-bd-b12-f5" v-if="_item.modelType==24">
        <div class="c-w0 c-flex-grow1 c-textAlign-c c-bd-r1-mgray" @click="clickCompanyIntro">公司简介</div>
        <div class="c-w0 c-flex-grow1 c-textAlign-c" @click="clickContactUs">联系我们</div>
      </div>
    </section>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import questionItem from "@/components/templates/questionItem.vue";
import indexLiveCom from "@/components/templates/indexLiveCom.vue";
import TestPaperItem from "@/components/templates/testPaperItem.vue";
import clockIndexCom from "@/components/templates/clockIndexCom.vue";
import wordIndexCom from "@/components/templates/wordIndexCom.vue";
import packageIndexCom from "@/components/templates/packageIndexCom.vue";
import reservationItem from "@/components/templates/reservationItem.vue";
import mutuaIndexCom from "@/components/templates/mutuaIndexCom.vue";
import voiceIndexCom from "@/components/templates/voiceIndexCom.vue";
import distributionIndexCom from "@/components/templates/distributionIndexCom.vue";
import flashSalesItem from "@/components/templates/flashSalesItem.vue";
import campIndexCom from "@/components/templates/campIndexCom.vue";
import bookingCom from "@/components/templates/bookingCom.vue";
import classItem from '@/components/templates/classItem.vue';
import eduIndexCom from '@/components/templates/eduIndexCom.vue';
import activityItem from "@/components/templates/activityItem.vue";
import ebooksItem from "@/components/templates/ebooks/ebooksItem.vue";
import circleItem from "@/components/templates/circle/circleItem.vue";
import { goDetails } from "@/utils/goDetails.js"
import indexPersonalliveCom from "@/components/templates/indexpersonalliveCom.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import { officialIndex } from "@/mixin/officialIndex.js";
export default {
  name: "IndexFour",
  mixins: [officialIndex],
  components: {
    swiper,
    swiperSlide,
    loadingStatusTem,
    clockIndexCom,
    indexLiveCom,
    indexPersonalliveCom,
    packageIndexCom,
    reservationItem,
    distributionIndexCom,
    flashSalesItem,
    wordIndexCom,
    mutuaIndexCom,
    voiceIndexCom,
    campIndexCom,
    bookingCom,
    classItem,
    eduIndexCom,
    activityItem,
    questionItem,
    ebooksItem,
    TestPaperItem,
    circleItem,
    vipStatus,
  },
  props: {
  },
  data() {
    return {
      categoryLevel: localStorage.getItem("categoryLevel") ? Number(localStorage.getItem("categoryLevel")) : 1,
      categoryTheme: JSON.parse(localStorage.getItem("categoryTheme")),
      getAlready: false,
      showSwiperList: true, //解决回到首页轮播图不轮播bug
      cfrom: global.ckFrom,
      loadingStatus: "LOADING",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isShowMemberTips: false, // 是否显示续费
      memberTips: "您的会员即将到期，请续费~", // 会员提示语
      nickName: "", //用户昵称
      userRole: 1, //当前用户身份 1普通用户； 2高级会员（开通年会员99元）3 代理商 4 svip 5.合伙人 6.分公司
      courseType: 1,
      vipCourseType: 1,
      collageList: [], //特惠专区
      excellentCourse: [], //精品课程
      courseVideoList: [],
      courseAudioList: [],
      coursePicList: [],
      vipCourseList: [], //精品课程
      vipCourseVideoList: [],
      vipCourseAudioList: [],
      vipCoursePicList: [],
      questionCount: 0,
      showExpire: false, // 时间是否到期
      isShowCS: false, //客服
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          bulletActiveClass: 'theme-bg'
        },
        loop: true,
        speed: 300,
        autoplay: {
          disableOnInteraction: false,
        },
        autoHeight: true,
        updateOnImagesReady: true,
        observer: true,
        on: {
          tap: function (event) {
            let linkUrl = event.srcElement.dataset.url;
            if (linkUrl) {
              if (!linkUrl.includes("http") && !linkUrl.includes("https")) {
                linkUrl = "http://" + linkUrl;
              }
              utilJs.locationHref(linkUrl, this);
            }
          },
        },
      },
      modules: [],
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
    };
  },

  mounted() {
    this.getAlready = false;
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    let expireTime = new Date().getTime() + 1000 * 60;
    // 解决有时候白屏问题
    if (this.companyAuth) {
        expireTime = utilJs.getTimeByDate(this.companyAuth.expireTime);
    }
    // 判断体验版是否到期，到期之后不可购买商品
    this.showExpire =
      expireTime - new Date().getTime() <
      0;
    if (!this.showExpire) {
      this.courseType = 1;
      this.vipCourseType = 1;
      this.courseVideoList = [];
      this.courseAudioList = [];
      this.coursePicList = [];
      this.vipCourseVideoList = [];
      this.vipCourseAudioList = [];
      this.vipCoursePicList = [];
      this.getIndexInfo();
      this.loadingStatus = "LOADING";
    } else {
      let isExireTime = new Date().getTime() - expireTime > 7776000000; // 过期时间超过3个月
      this.$cjConfirm({
        title: '店铺已打烊',
        message: `打烊期间无法购买商品，${isExireTime ? '无法访问!' : '所有服务停止!'}`,
        showCancelButton: false,
        clickCloseModal: false,
        onConfirm:() => {
          // 店铺已打烊提示消失后执行
          this.courseType = 1;
          this.vipCourseType = 1;
          this.courseVideoList = [];
          this.courseAudioList = [];
          this.coursePicList = [];
          this.vipCourseVideoList = [];
          this.vipCourseAudioList = [];
          this.vipCoursePicList = [];
          this.getIndexInfo();
          this.loadingStatus = "LOADING";
        }
      })
    }
    this.$nextTick(function () {
      window.addEventListener('scroll', this.swiperScroll);
    });
  },
  computed: {},
  watch: {
    $route(to, from) {
      if (to.path == "/") {
        this.courseType = 1;
        this.vipCourseType = 1;
        this.courseVideoList = [];
        this.courseAudioList = [];
        this.coursePicList = [];
        this.vipCourseVideoList = [];
        this.vipCourseAudioList = [];
        this.vipCoursePicList = [];
        this.getIndexInfo();
        this.loadingStatus = "LOADING";
      }
    }
  },
  methods: {
    clickShowQR() {
      this.$store.commit('updateShowAttentionQr', true);
    },
    swiperClick(linkUrl) {
      if (linkUrl) {
        if (!linkUrl.includes("http") && !linkUrl.includes("https")) {
          linkUrl = "http://" + linkUrl;
        }
        utilJs.locationHref(linkUrl, this);
      }
    },
    swiperScroll: function () {
      let swap = document.getElementById('swap');
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (!swap) { return; }
      if (swap.offsetTop > scrollTop + clientHeight || swap.offsetTop + swap.offsetHeight < scrollTop) {
        if (this.$refs.swiperMy[0].swiper != undefined) {
          this.$refs.swiperMy[0].swiper.autoplay.stop();
        }
      } else {
        if (this.$refs.swiperMy[0].swiper != undefined) {
          this.$refs.swiperMy[0].swiper.autoplay.start();
        }
      }
    },
    //获取首页相关数据
    getIndexInfo() {
      let that = this;
      this.showSwiperList = false;
      this.$nextTick(() => {
        this.showSwiperList = true;
      });
      utilJs.getMethod(global.apiurl + "company/getOfficialIndex?mb=4", function (res) {
        that.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
        that.$store.commit('updateUserVipType', res.userType);
        localStorage.setItem(
          "vipType" + res.userId,
          res.userType
        );
        if (
          (res.userType == 2 || res.userType == 4) &&
          res.vipDay <= 7 &&
          res.vipDay >= 0
        ) {
          let userTypeName = res.userType == 2 ? "VIP" : "SVIP";
          if (Number(res.vipDay) == 0) {
            that.memberTips =
            "您的" + userTypeName + "会员今天过期，";
          } else {
            that.memberTips =
            "您的" + userTypeName + "会员还有" + res.vipDay + "天过期，";
          }
          that.isShowMemberTips = true;
        } else {
          that.isShowMemberTips = false;
        }
        that.collageList = res.collageList;
        that.userRole = res.userType;
        that.modules = res.modules;
        that.modules.forEach(el => {
          if (el.modelType == 1 && el.items.length == 1) {
            that.swiperOption.autoplay = false;
            that.swiperOption.loop = false;
          }
        })
        that.nickName = res.nickname;
        that.questionCount = res.questionCount;
        let hotCourses = res.modules.filter(function (item) {
          return item.modelType == 25;
        })
        let vipCourses = res.modules.filter(function (item) {
          return item.modelType == 26;
        })
        if (hotCourses && hotCourses.length > 0 && hotCourses[0].items) {
          that.courseVideoList = hotCourses[0].items.videoCourse.data;
          that.courseAudioList = hotCourses[0].items.audioCourse.data;
          that.coursePicList = hotCourses[0].items.articleCourse.data;
        }
        if (vipCourses && vipCourses.length > 0 && vipCourses[0].items) {
          that.vipCourseVideoList = vipCourses[0].items.videoCourse.data;
          that.vipCourseAudioList = vipCourses[0].items.audioCourse.data;
          that.vipCoursePicList = vipCourses[0].items.articleCourse.data;
        }
        that.courseType =
          that.courseVideoList.length > 0
            ? 1
            : that.courseAudioList.length > 0 ? 2 : 3;
        that.vipCourseType =
          that.vipCourseVideoList.length > 0
            ? 1
            : that.vipCourseAudioList.length > 0 ? 2 : 3;
        that.excellentCourse =
          that.courseVideoList.length > 0
            ? that.courseVideoList
            : that.courseAudioList.length > 0
              ? that.courseAudioList
              : that.coursePicList;
        that.vipCourseList =
          that.vipCourseVideoList.length > 0
            ? that.vipCourseVideoList
            : that.vipCourseAudioList.length > 0
              ? that.vipCourseAudioList
              : that.vipCoursePicList;
        that.loadingStatus = "LOAD_END";
        let title = window.localStorage.getItem("shareTitle") || window.localStorage.getItem("companyName");
        let shareImg = window.localStorage.getItem("shareLogo");
        let shareDesc = window.localStorage.getItem("shareDesc");
        let shareUrl =
          window.location.href.split("#")[0] +
          "#" +
          that.$route.path +
          "?refereeId=" +
          localStorage.getItem("userId");
        utilJs.wechatConfig(
          shareUrl,
          title,
          shareImg,
          shareDesc,
          function () { }
        );
      });
    },
    //领取优惠券
    getCoupon(couponId) {
      let $this = this;
      if (
        localStorage.getItem("enableBindPhoneInRedeemCode") == 1 &&
        !localStorage.getItem("uMobile")
      ) {
        utilJs.goBindMobile();
      } else {
        utilJs.postMethod(
          global.apiurl + "redeemCodes/collectRedeemCodeId/" + couponId,
          {source: 2}, //从首页领取
          function (res) {
            if (res.status == 8 || res.status == 15) {
              $this.$showCjToast({
                text: '领取成功',
                type: 'success'
              });
            } else if (res.status == 13) {
              utilJs.goBindMobile();
            } else {
              $this.$showCjToast({
                text: res.detail,
                type: 'warn'
              });
            }
          }
        );
      }
    },
    clickGoPoints() {
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralDetail" });
    },
    changeType(tabIndex) {
      this.courseType = tabIndex;
      switch (tabIndex) {
        case 1:
          this.excellentCourse = [...this.courseVideoList];
          break;
        case 2:
          this.excellentCourse = [...this.courseAudioList];
          break;
        case 3:
          this.excellentCourse = [...this.coursePicList];
          break;
      }
    },
    changeVipType(tabIndex) {
      this.vipCourseType = tabIndex;
      switch (tabIndex) {
        case 1:
          this.vipCourseList = [...this.vipCourseVideoList];
          break;
        case 2:
          this.vipCourseList = [...this.vipCourseAudioList];
          break;
        case 3:
          this.vipCourseList = [...this.vipCoursePicList];
          break;
      }
    },
    timeFn: function (index) {
      let stime = this.collageList
        ? utilJs.getTimeByDate(this.collageList[index].startTime)
        : 0;
      let etime = this.collageList
        ? utilJs.getTimeByDate(this.collageList[index].endTime)
        : 0;
      let nowTime = new Date().getTime();
      //status 1未开始,2进行中,3已结束,4已停止
      let time = "";
      if (stime > nowTime) {
        this.collageList[index].status = 1;
        time = this.collageList[index].startTime;
      } else if (etime > nowTime) {
        this.collageList[index].status = 2;
        time = this.collageList[index].endTime;
      } else {
        this.collageList[index].status = 3;
      }
      return time;
    },
    finishFn: function (index) {
      if (this.collageList[index].status == 1) {
        this.collageList[index].status = 2;
      } else {
        this.collageList[index].status = 3;
      }
    },
    clickGoCourse(e) {
      //点击精品课程查看
      goDetails(this, global.ckFrom.course, '', {isList: 1, sort: "hot"}, '', 1);
    },
    //点击VIP课程查看
    clickGoVipCourse(e) {
      goDetails(this, global.ckFrom.course, '', {isList: 1, isVip: 1, type: this.vipCourseType}, '', 1);
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.swiperScroll);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.icon-index-spread {
  color: #26bb82;
}
.icon-index-course {
  color: #d8bf78;
}
.icon-index-attention {
  color: #f5af5e;
}
.icon-index-column {
  color: #7fccf7;
}
.icon-index-watch {
  color: #589dee;
}
.img-course-colum {
  width: 100%;
  height: 4.5rem;
  overflow: hidden;
}
.img-database {
  width: 100%;
  height: 5.65rem;
  overflow: hidden;
}
.c-tips {
  top: 0;
  color: red;
  z-index: 1000;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 0.35rem solid transparent;
  border-right: 0.35rem solid #1ba3e4;
  border-bottom: 0.35rem solid transparent;
}
div img {
  display: block;
}
.icon-course-mark {
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
}
.vipStatus {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 2.5rem;
  height: 2.5rem; */
  width: 1.75rem;
  height: 1.75rem;
}
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: 0.9rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
}

.couponStyle {
  width: 6.75rem;
  box-shadow: 0 0 0.65rem 0 rgba(0, 0, 0, 0.12);
}
.coupon-bg {
  background: url("../../../../public/i/wap/coupon/coupon_top.png") no-repeat;
  background-size: 100%;
  height: 2.55rem;
}
.fc-coupon {
  color: #ee6d3f;
}
.exchange-bg {
  background: url("../../../../public/i/wap/coupon/exchange_top.png") no-repeat;
  background-size: 100%;
  height: 2.55rem;
}
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
.c-bg-E93F21 {
  background-color: #E93F21;
}
</style>
